<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <%@ include file="style.jsp" %>
    <link rel="stylesheet" type="text/css" href="./css/cascader.css"/>
    <script src="./js/cascader.js"></script>
    <script src="./js/options.js"></script>
    <link rel="stylesheet" href="css/cart.css">
    <script src="./js/jquery-1.12.4.js"></script>
</head>

<body>

<%@ include file="start.jsp" %>
<!--  导航 end -->
<%@ include file="header.jsp" %>
<!--  header end -->
<div class="submena clearfix">
        <span class="layui-breadcrumb" lay-separator=">">
            <a href="${pageContext.request.contextPath}/shop/client">首页</a>
            <a><cite>购物车</cite></a>
        </span>
</div>
<div class="w grid" style="margin-bottom: 50px;">
    <!-- 商品购物车容器 -->
    <div class="car-wrap">
        <!-- 商品模块盒子标题 -->
        <div class="car-title" style="padding: 19px 100px;">
            <div class="t-goods">商品</div>
            <div class="t-price">单价</div>
            <div class="t-num">数量</div>
            <div class="t-sum">小计</div>
            <div class="t-action">操作</div>
        </div>
        <c:if test="${fn:length(cart)>0}">
        <!-- 商品模块盒子列表 -->
        <div class="car-item-list">
            <c:forEach items="${cart}" var="item" varStatus="vs">
                <div class="card-item" data-index="${vs.index}" style="padding: 10px 20px;">
                    <div class="p-goods" style="display: flex;flex-direction: column;">
                        <div class="p-des">
                                ${item.key.name}
                        </div>
                        <div class="p-img" style="border: 0;padding: 0">
                            <img src=".${item.key.imgurl}" alt="">
                        </div>
                    </div>
                    <div class="p-price">￥${item.key.price}</div>
                    <div class="p-num">
                        <input type="text" value="${item.value}" class="txt" readonly>
                    </div>
                    <div class="p-sum">￥${item.key.price}</div>
                    <div class="p-action">
                        <a href="javascript:">删除</a>
                    </div>
                </div>
            </c:forEach>
        </div>
            <div class="car-floatBar" style="margin-bottom:0;height:auto;">
            <form class="layui-form" action="${pageContext.request.contextPath}/shop/client/accounts" method="post">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">收货人</label>
                        <div class="layui-input-inline">
                            <input type="text" name="receiverName" required lay-verify="required" placeholder="请输入收货人姓名"
                                   autocomplete="off" class="layui-input" lay-verify="required" lay-reqText="请填写收件人姓名">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">收货地址</label>
                        <div class="layui-input-inline">
                            <div id="area"></div>
                        </div>
                        <script>
                            layui.use(['layCascader','form'], function () {
                                let form = layui.form;
                                let layCascader = layui.layCascader;
                                let layCascade = layCascader({
                                    elem: '#area',
                                    options: [
                                        {
                                            value:'福建省',
                                            label:'福建省',
                                            children:[{
                                                value:'泉州市',
                                                label: '泉州市',
                                                children: [{
                                                    value:'安溪县',
                                                    label:'安溪县'
                                                }]
                                            },{
                                                value: '福州市',
                                                label: '福州市',
                                                children:[{
                                                    value: '长乐市',
                                                    label: '长乐市',
                                                    children:[{
                                                        value:'湖南镇',
                                                        label:'湖南镇'
                                                    }]
                                                }]
                                            }]
                                        }],
                                    props: {
                                        expandTrigger: 'hover',
                                        strictMode:true
                                    },
                                    placeholder:'请选择地址'
                                });
                                layCascade.changeEvent(function (value, node) {
                                    let receiverAddress = (layCascade.getCheckedValues().toString().replace(/,/g,""));
                                    $('#receiverAddress').val(receiverAddress);
                                });
                                form.on('submit(*)', function(data){
                                    // 判断是否选择了收货地址
                                    let field = data.field;
                                    if(!layCascade.getCheckedValues){
                                        layui.msg('请选择先收货地址');
                                        return false;
                                    }
                                    return true;
                                });
                            });
                        </script>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" >详细地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="receiverAddress" id="receiverAddress" required lay-verify="required" placeholder="请输入收件地址"
                                   autocomplete="off" class="layui-input" lay-verify="required" lay-reqText="请填写您的收件地址">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="receiverPhone" required lay-verify="required" placeholder="请输入联系电话"
                                   autocomplete="off" class="layui-input" lay-verify="required|phone"
                                   lay-reqText="请填写您的手机号">
                        </div>
                    </div>
                    <div class="layui-inline" style="float: right">
                        <div class="layui-input-inline">
                            <button class="btn-area" lay-submit lay-filter="*" >提交订单</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
            <div class="car-floatBar">
            <div class="operation">
                <a href="javascript:;" class="clear-all">清空购物车</a>
            </div>
            <div class="toolbar-right">
                <div class="amount-sum">已经选<em>0</em>件商品</div>
                <div class="price-sum">总价： <em>¥0.00</em></div>
            </div>
        </div>
        </c:if>
        <c:if test="${fn:length(cart)<=0}">
            <h1>购物车中暂无数据</h1>
        </c:if>
    </div>
</div>
<%@include file="footer.jsp" %>

<script>
    $(function () {
        // 删除单个商品
        $('.p-action a').click(function () {
            let book = $(this).parents('.card-item');
            let removeIdList = [];
            removeIdList.push(book.attr("data-index"))
            $.post("removeBooks",
                {
                    removeIdList: removeIdList.toString()
                });
            book.remove();
            getSum();
        });

        // 清空购物车
        $('.clear-all').click(function () {
            let cards = $('.card-item');
            let removeIdList = []
            for (let i = 0; i < cards.length; i++) {
                removeIdList.push($(cards[i]).attr("data-index"));
            }
            if (removeIdList.length === 0) {
                return;
            }
            $.post("removeBooks",
                {
                    removeIdList: removeIdList.toString()
                }
            );
            cards.remove();
            getSum();
        });

        getSum();
    });

    // 计算总件数和总金额
    function getSum() {
        // 获取所有选中的商品数量的输入框
        var total = 0;
        var items = $('.card-item');
        items.find('.txt').each(function (index, el) {
            total += parseInt($(el).val());
        });
        $('.amount-sum em').text(total);
        // 获取总金额
        var money = 0;
        items.find('.p-sum').each(function (index, el) {
            money += parseFloat($(el).text().substr(1));
        });
        $('.price-sum em').text('￥' + money);
    }
</script>
</body>

</html>